<template>
    <div class="pages-login">
        <!--图片背景-->
        <!--<div class="pages-login-bg"></div>-->

        <!-- 登录tab集合 -->
        <div class="pages-login-tab">
            <img class="logoStyle" style="position: absolute;" src="../../assets/logo.png">
            <div class="login-box">
                <ul class="longin-menu" v-if="loginMethod !== 'forgetPwd'">
                    <li :class="{selected:loginMethod === 'wechat'}" @click="loginMethod = 'wechat'" attr="wechat">
                        微信扫码登录/注册
                    </li>
                    <li :class="{selected:loginMethod === 'account'}" @click="loginMethod = 'account'" attr="account">
                        账号登录
                    </li>
                </ul>

                <div v-if="loginMethod === 'wechat'">
                    <wechat></wechat>
                </div>
                <div v-if="loginMethod === 'account'">
                    <account @forget-pwd="forgetPwd"></account>
                </div>
                <div v-if="loginMethod === 'forgetPwd'">
                    <forgetPwd @change-state="changeState"></forgetPwd>
                </div>
            </div>
            <div class="login-tip">
                <div>为了更好的用户使用体验,建议使用<span style="color: #337ab7;">谷歌浏览器(chrome)</span>、360浏览器极速模式、IE10或更好版本。</div>
            </div>
        </div>
    </div>
</template>

<script>
    import wechat from './child/wechart.vue'
    import account from './child/account.vue'
    import forgetPwd from './child/forgetPwd.vue'

    export default {
        data(){
            return {
                loginMethod: 'wechat',
            }
        },
        methods: {
            //忘记密码
            forgetPwd:function () {
                this.loginMethod = 'forgetPwd';
            },
            changeState:function () {
                setTimeout(() => {
                    this.loginMethod = 'account';
                },1000)

            }
        },
        components: {
            wechat,
            account,
            forgetPwd
        }
    }
</script>

<style scoped lang="scss">
    .pages-login {
        .pages-login-bg {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgb(64, 64, 64);
            background-image: url(../../../static/img/login_bg.jpg);
            background-position: center 0;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
        }

        .pages-login-tab {
            width: 860px;
            margin: 250px auto;
            background-color: #edf0f5;
            padding-bottom: 10px;
            position: relative;

            .longin-menu {
                width: 100%;
                height: 50px;
                border: none;

                li {
                    float: left;
                    width: 220px;
                    height: 100%;
                    color: #7a8aa6;
                    border: 1px solid #e5e9ed;
                    font: 400 16px '微软雅黑';
                    line-height: 50px;
                    text-align: center;
                    cursor: pointer;
                    box-sizing: border-box;
                    background-color: #f8f9fb;
                    border-top-color: transparent;

                    &:nth-child(1){
                        border-left: none;
                    }

                    &:nth-child(2){
                        border-right: none;
                    }

                    &.selected{
                        background-color: #fff;
                        border: none;
                        color: #666;
                    }
                }
            }

            .logoStyle {
                position: absolute;
                margin-left: -90px;
                left: 50%;
                top: -70px;
            }

            .login-box {
                margin-left: 210px;
                width: 440px;
                height: 450px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
                background-color: #ffffff;
            }

            .login-tip {
                margin-top: 10px;
                text-align: center;
                font: 400 12px '微软雅黑';
                color: #8899aa;
            }
        }
    }
</style>
